<template>
    <div class="discussions__item">
        <div class="discussions__item-header" v-on:click="open = !open">
            <div class="discussions__header-c discussions__c--date">
                {{ discussion.date }}
            </div>
            <div class="discussions__header-c discussions__c--subject">
                {{ discussion.subject }}
            </div>
            <div class="discussions__header-c discussions__c--created-by">
                {{ discussion.created_by }}
            </div>
        </div>
        <div class="discussions__item-main" v-if="open">
            <div class="discussions__item-content">
                {{ discussion.content }}
            </div>
            <div class="discussions__item-response-container" v-if="composer">
                <textarea class="discussions__item-response-input" placeholder="Type your message"></textarea>
            </div>
            <div class="discussions__item-controls">
                <div class="btn-group">
                    <div class="btn btn--white" v-on:click="cancel">Cancel</div>

                    <div class="btn" v-on:click="composer = true" v-if="!composer">Reply</div>
                    <div class="btn" v-if="composer">Send Message</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

    export default {
        components: {

        },

        props: [
            'discussion'
        ],

        data() {
            return {
                open: false,
                composer: false
            }
        },

        methods: {
            cancel: function() {
                this.composer = false;
                this.open = false;
            }
        }
    }
</script>